.theme-switcher {
    background-color: transparent; /* 移除背景色 */
    display: flex;
    align-items: center;
    cursor: pointer;
}

.theme-switch-checkbox {
    display: none; /* 隐藏复选框 */
}

.theme-switch-label {
    display: flex;
    align-items: center;
    width: 60px; /* 切换按钮的宽度 */
    height: 34px; /* 切换按钮的高度 */
    position: relative; /* 为了让内部图标居中 */
    transition: background 0.3s; /* 背景颜色过渡效果 */
    justify-content: center; /* 图标居中 */
}

/* 图标样式 */
.theme-switch-inner {
    position: relative; /* 相对定位图标 */
    width: 100%; /* 覆盖整个按钮宽度 */
    height: 100%; /* 覆盖整个按钮高度 */
    display: flex;
    justify-content: center; /* 图标居中对齐 */
    align-items: center;
    padding: 0 10px; /* 内边距 */
}

.icon {
    font-size: 24px; /* 图标大小 */
    transition: opacity 0.3s ease; /* 平滑的淡入淡出动画 */
    position: absolute; /* 绝对定位，重叠显示太阳和月亮 */
    opacity: 0; /* 默认图标不可见 */
}

/* 太阳图标默认可见 */
.sun {
    opacity: 1;
    color: #f39c12; /* 太阳的颜色 */
}

/* 复选框未选中时显示太阳图标，隐藏月亮图标 */
.theme-switch-checkbox:checked + .theme-switch-label .sun {
    opacity: 0; /* 选中时隐藏太阳 */
}

/* 复选框选中时显示月亮图标，隐藏太阳图标 */
.theme-switch-checkbox:checked + .theme-switch-label .moon {
    opacity: 1; /* 选中时显示月亮 */
    color: #f1c40f; /* 月亮的颜色 */
}
